<template>
  <div class="App-navPopover">
        <van-popover theme="dark" trigger="click" placement="bottom-end" close-on-click-outside
            :actions="actions"
            @select="select"
            v-if="showElement"
            v-model="showPopover"
        >
            <template #reference>
                <van-icon size="18" color="#646566" name="plus" />
            </template>
        </van-popover>
  </div>
</template>

<script>
    export default {
        props: ["showElement"],
        data() {
            return {
                showPopover: false,
                // 通过 actions 属性来定义菜单选项
                actions: [
                    { text: "创建群聊", icon: "chat" },
                    { text: "添加好友", icon: "manager" },
                ],
            };
        },
        methods: {
            select(action, index, number) {
            switch (index) {
                case 0:
                    this.$router.push("/groupChat");
                break;
                case 1:
                    this.$router.push("/addFriend");
                break;
            }
            },
        },
    };
</script>
